/**
* 页面浏览图
*/

<template>
    <div class="device-activation-content">
        <div class="device-content">
            <div class="title">
                <span class="span-1">{{name}}</span>
            </div>
            <slot name="timeSelect"></slot>
            <div v-auto-resize style="height: 380px;" ref="chartEl" class="chart-wrap" />
            <div v-auto-resize style="height: 380px;" ref="chartEl2" class="chart-wrap" />
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'

let oChart
let oChart2
export default {
  name: 'ChartStageTrend',
  mixins: [EchartsBase],
  directives: {
    AutoResize
  },
  props: {
    pageBrowseData: {
      type: Object
    },
    name: {
      type: String
    }
  },
  watch: {
    pageBrowseData (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          oChart = echarts.init(this.$refs.chartEl)
          oChart2 = echarts.init(this.$refs.chartEl2)
          this.setOption(now)
          this.setOption2(now)
        })
      }
    }
  },
  created () {

  },
  methods: {
    setOption (data) {
      let legendArr = ['页面访问人数', '页面访问量']
      let xAxisArr = []
      let series1Data = []
      let series2Data = []
      this._.each(data.pageActivePVUV, (item) => {
        xAxisArr.push(item.page_name)
        series1Data.push(item.page_UV)
        series2Data.push(item.page_PV)
      })
      let option = {
        backgroundColor: '#ffffff',
        color: ['#2CD9C5', '#8C54FF'],
        'tooltip': {
          'trigger': 'axis',
          'axisPointer': {
            'type': 'shadow',
            textStyle: {
              color: '#fff'
            }

          }
        },
        'grid': {
          'borderWidth': 0,
          'top': 110,
          'bottom': 95,
          textStyle: {
            color: '#fff'
          }
        },
        'legend': {
          x: '4%',
          top: '8%',
          'data': legendArr
        },

        'calculable': true,
        'xAxis': [{
          'type': 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E9EBF1',
              width: 2
            }
          },
          'splitLine': {
            'show': false
          },
          'axisTick': {
            'show': false
          },
          'splitArea': {
            'show': false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#212529',
              fontSize: 16
            }
          },
          'data': xAxisArr
        }],
        'yAxis': [{
          'type': 'value',
          'splitLine': {
            'show': false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E9EBF1',
              width: 2
            }
          },
          'axisTick': {
            'show': false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#212529',
              fontSize: 16
            }
          },
          'splitArea': {
            'show': false
          }

        }],
        dataZoom: [
          {
            show: true,
            realtime: true,
            zoomLock: true,
            start: 0,
            end: 80
          },
          {
            type: 'inside',
            realtime: true,
            zoomLock: true,
            start: 0,
            end: 12
          }
        ],
        'series': [{
          'name': legendArr[0],
          'type': 'bar',
          'barMaxWidth': 30,
          'barGap': '10%',
          'itemStyle': {
            'normal': {
              'color': '#2CD9C5',
              'label': {
                'show': true,
                'textStyle': {
                  'color': '#fff'
                },
                'position': 'inside',
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : ''
                }
              }
            }
          },
          'data': series1Data
        },
        {
          'name': legendArr[1],
          'type': 'bar',
          'barMaxWidth': 30,
          'barGap': '10%',
          'itemStyle': {
            'normal': {
              'color': '#8C54FF',
              'barBorderRadius': 0,
              'label': {
                'show': true,
                'position': 'inside',
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : ''
                }
              }
            }
          },
          'data': series2Data
        }
        ]
      }
      oChart.setOption(option)
    },
    setOption2 (data) {
      let legendListData = ['平均访问时长/秒']
      let xAxisListData = []
      let series1ListData = []
      this._.each(data.average_use_duration_by_page, (item) => {
        xAxisListData.push(item.page_name)
        series1ListData.push(item.average_use_duration_by_page)
      })
      let option = {
        backgroundColor: '#ffffff',
        color: ['#2CD9C5', '#8C54FF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: legendListData,
          top: '2%',
          left: '10',
          textStyle: {
            color: '#2125296',
            fontSize: 16
          }
        },
        grid: {
          left: '6%',
          right: '4%',
          top: '15%',
          bottom: '16%',
          containLabel: true
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          x: 'right',
          y: 'center'
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            zoomLock: true,
            start: 0,
            end: 80
          },
          {
            type: 'inside',
            realtime: true,
            zoomLock: true,
            start: 0,
            end: 12
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xAxisListData,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E9EBF1',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#212529',
                fontSize: 16
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            'nameTextStyle': {
              'color': '#2CD9C5',
              'fontSize': 16
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E9EBF1',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#212529',
                fontSize: 16
              }
            }
          }
        ],
        series: [
          {
            name: legendListData[0],
            type: 'line',
            smooth: true,
            showAllSymbol: true, // 显示所有图形。
            symbol: 'circle', // 标记的图形为实心圆
            symbolSize: 8, // 标记的大小
            itemStyle: {
              normal: {
                areaStyle: {
                  // color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(44,217,197,0.1)'
                  }, {
                    offset: 1,
                    color: 'rgba(44,217,197,0.5)'
                  }])
                }
              }
            },
            data: series1ListData,
            barWidth: '30%'
          }
        ]
      }
      oChart2.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-activation-content{
        @include device-content;
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
    }

</style>
